<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新增页面</title>
	<link rel="stylesheet" href="../../../component/pear/css/pear.css" />

</head>
<body>
<form id="addgame" enctype="multipart/form-data"  class="layui-form" accept-charset="UTF-8">
	<div class="mainBox">
		<div class="main-container">
			<div class="layui-form-item">
				<label class="layui-form-label">游戏名</label>
				<div class="layui-input-block">
					<input type="text" name="game_name" lay-verify="title" autocomplete="off" placeholder="请输入游戏名"
						   class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">价格</label>
				<div class="layui-input-block">
					<input type="text" name="price" lay-verify="title" autocomplete="off" placeholder="请输入价格"
						   class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">开发者</label>
				<div class="layui-input-block">
					<input type="text" name="game_developer" lay-verify="title" autocomplete="off" placeholder="请输入开发者"
						   class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">时间</label>
				<div class="layui-input-block">
					<input type="date" name="release_time" lay-verify="title" autocomplete="off"
						   class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">图片</label>
				<div class="layui-input-block">
					<input name="game_img" id="gameimg" type="file" src=""><br><br><br>
					<img class="gameimg" width="300px" height="200px">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">游戏类型</label>
				<div class="layui-input-block">
					<select name="typeid" id="gametype">

					</select>
				</div>
			</div>

		</div>
	</div>
	<div class="bottom">
		<div class="button-container">
			<button id="addbtn" type="button" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
					lay-filter="user-save">
				<i class="layui-icon layui-icon-ok"></i>
				提交
			</button>
			<button type="reset" class="pear-btn pear-btn-sm">
				<i class="layui-icon layui-icon-refresh"></i>
				重置
			</button>
		</div>
	</div>
</form>
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function () {


		$("#gameimg").change( function (e) {


			let imgData =new  FormData();
			//得到一个file对象->存储的是选择文件的集合(数组)

			let img = e.target.files[0];
			imgData.append("game_img",img);

			// let img=this.files[0];
			let img_name=img.name;
			console.log(imgData.get("game_img"));


			//判断上传的文件是否是图片
			if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(img.name)) {
				alert("文件格式错误");
				$(this).val("");
			}else {

				$.ajax({
					type: "post",
					url: "http://localhost:8080/dreamgame/game/upload",
					data: imgData,
					cache: false,
					contentType: false,
					//processData 默认值是true,jquery会序列化数据,false,jquery不处理
					processData: false,
				}).success(function (r){
					console.log(r.data);

					$(".gameimg").prop("src","http://rjgs8gsgn.hn-bkt.clouddn.com/"+r.data);

				}).error(function (){
					alert("上传失败");
				});

			}

		})


		$("#addbtn").click(function () {


			let formData = new FormData($("#addgame")[0]);

			for (var [a, b] of formData.entries()) {
				console.log(a, b);
			}

			$.ajax({
				url: "http://localhost:8080/dreamgame/game/add",

				async: true,

				// dataType:"json",

				processData: false,
				contentType: false,

				type: "post",

				// contentType: "application/json",
				// data: JSON.stringify(convertFormtoJson("addgame")),
				//     data: JSON.stringify(formdata),
				data: formData,

				success: (r) => {
					if (r.code == 1) {
						alert(r.msg);
						window.location.reload(true);
					} else {
						alert("添加成功");
						window.location.reload(true);
					}
					// console.log(r);
				}

			})
		})


		getData();

		//获取游戏类型的方法
		function getData() {
			$.ajax({
				url: "http://localhost:8080/dreamgame/gametype/gettypes",

				async: true,

				dataType: "json",

				type: "get",

				success: (r) => {

					let list = r.data;

					for (let t of list) {
						let str = `<option value='${t.typeid}'>${t.typename}</option>`;
						$("#gametype").append(str);
						layui.form.render("select");
					}
				},

				error:(r)=>{
					alert(r.msg);
				}
			})
		}
	})


</script>
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script>
	layui.use(['form', 'jquery'], function() {
		let form = layui.form;
		let $ = layui.jquery;
		/*
                        form.on('submit(user-save)', function(data) {
                            $.ajax({
                                url: 'game/add',
                                data: JSON.stringify(data.field),
                                dataType: 'json',
                                contentType: 'application/json',
                                type: 'post',
                                success: function(result) {
                                    if (r.code == 1) {
                                        layer.msg(result.msg, {
                                            icon: 1,
                                            time: 1000
                                        }, function() {
                                            parent.layer.close(parent.layer.getFrameIndex(window
                                                .name)); //关闭当前页
                                            parent.layui.table.reload("user-table");
                                        });
                                    } else {
                                        layer.msg(result.msg, {
                                            icon: 2,
                                            time: 1000
                                        });
                                    }
                                }
                            })
                            return false;
                        });*/
	})
</script>
</body>
</html>
